在修練武學的期間，我們將內功修習到極致，將「精、氣、神」三者融合為一，在自動化測試撰寫腳本時，可以分為測試案例規劃、測試案例撰寫與執行、測試案例修復，今天我們將學習 Playwright Agents 讓 AI agents 整合進開發流程裡面。
在傳統開發上，從理解需求、撰寫程式碼、執行測試到最後的除錯修復，每個階段都需要人的參與，這些工作通常耗時且容易出錯，曾經有句話，某個功能的生命週期有 20% 是產生程式碼，剩下的 80% 則是在於維護與修改。當需求與 UI 頻繁變動的時候，除了產品程式碼需要修改，測試程式碼也需要同步修改。根據這幾天的實作，我們知道 .prompt 和 .chatmode 的撰寫能夠讓 AI agent 更精確的執行任務，而透過 Playwright Agents 則提供一個模版，讓我們可以透過 Copliot 將這些任務自動化，並且將心力放在測試策略和更有價值的任務上面。
Playwright Agents 是一套強大的自動化工具，主要是為了簡化測試開發和維護工作。它主要由三個核心元件組成：
npm install -D @playwright/test@latest
npx playwright init-agents --loop=vscode
專案中會產生 agents 和 seed 檔案。seed 檔案是一個關鍵，你可以將登入狀態、自訂 fixtures 或任何測試前置設定寫入其中。這樣能確保 Agents 產生的測試都從一個風格一致的初始化狀態開始，例如：在登入後直接開始測試。
import { test, expect } from '@playwright/test';
test.describe('Test group', () => {
test('seed', async ({ page }) => {
// generate code here.
});
});
現在，我們將透過一個簡單的實例，完整演練 Planner、Generator 和 Healer 這三位一體的威力。
我們將在 VS Code 的 Copilot Chat 中，用自然語言描述我們的測試意圖。
planner
建立測試計畫，主要是驗證 https://playwright.dev/ 首頁的標題是否正確，並點擊 'Get started' 連結後，確認頁面跳轉到 'Installation' 頁面，並且將測試計畫儲存至 specs 資料夾內。
# Playwright 官網首頁測試計畫
## 應用程式概述
Playwright 官方網站 (https://playwright.dev/) 是 Microsoft 開發的現代網頁測試工具的官方首頁。該網站提供以下主要功能：
- **首頁展示**: 展示 Playwright 的核心功能與優勢
- **導航功能**: 提供主要功能頁面的快速導航
- **文檔入口**: 通過 'Get started' 按鈕引導用戶到安裝與設定頁面
- **品牌呈現**: 展示產品標題、標語和核心價值主張
- **跨平台支援**: 適配不同瀏覽器和設備的響應式設計
## 測試場景
### 1. 首頁標題驗證
**種子檔案:** `seed.spec.ts`
#### 1.1 驗證頁面標題正確性
**步驟:**
1. 導航到 https://playwright.dev/
2. 等待頁面完全載入
3. 取得頁面標題
**預期結果:**
- 頁面成功載入，沒有錯誤訊息
- 頁面標題包含 "Playwright" 關鍵字
- 標題格式符合預期（例如：包含版本資訊或簡短描述）
#### 1.2 驗證主要標語顯示
**步驟:**
1. 導航到 https://playwright.dev/
2. 檢查頁面主要標語或口號是否正確顯示
3. 驗證標語內容的可讀性
**預期結果:**
- 主要標語清晰可見
- 文字內容完整且無亂碼
- 標語位置在頁面顯著位置
### 2. 導航功能測試
#### 2.1 'Get started' 按鈕功能驗證
**步驟:**
1. 導航到 https://playwright.dev/
2. 等待頁面完全載入
3. 尋找並識別 'Get started' 按鈕或連結
4. 點擊 'Get started' 按鈕
5. 等待新頁面載入
**預期結果:**
- 'Get started' 按鈕/連結在首頁中可見且可點擊
- 點擊後成功跳轉到新頁面
- 新頁面 URL 指向安裝或設定相關頁面
- 頁面跳轉無錯誤或載入問題
#### 2.2 跳轉至 Installation 頁面驗證
**步驟:**
1. 從首頁點擊 'Get started' 按鈕（延續 2.1 場景）
2. 驗證目標頁面 URL
3. 檢查頁面內容是否為安裝指南
4. 驗證頁面標題是否包含 "Installation" 或相關關鍵字
**預期結果:**
- URL 變更為安裝/入門相關路徑
- 頁面包含 Playwright 安裝說明
- 頁面標題反映安裝或入門內容
- 頁面載入速度在合理範圍內（< 3秒）
### 3. 頁面載入與效能測試
#### 3.1 首頁載入效能驗證
**步驟:**
1. 清除瀏覽器快取
2. 導航到 https://playwright.dev/
3. 記錄頁面載入時間
4. 檢查所有資源是否正確載入
**預期結果:**
- 頁面在 3 秒內完成載入
- 所有圖片、CSS、JavaScript 資源載入成功
- 無 404 或其他 HTTP 錯誤
- 頁面佈局穩定，無明顯的內容跳動
#### 3.2 頁面回應性測試
**步驟:**
1. 導航到 https://playwright.dev/
2. 模擬不同視窗大小（桌面、平板、手機）
3. 檢查頁面元素在不同尺寸下的顯示
4. 驗證 'Get started' 按鈕在各種尺寸下的可用性
**預期結果:**
- 頁面在不同視窗大小下保持良好佈局
- 'Get started' 按鈕在所有尺寸下都可見且可點擊
- 文字內容可讀性良好，無重疊或截斷
- 導航元素功能正常
### 4. 錯誤處理與邊界條件測試
#### 4.1 網路連線中斷測試
**步驟:**
1. 導航到 https://playwright.dev/
2. 模擬網路連線中斷
3. 嘗試點擊 'Get started' 按鈕
4. 檢查錯誤處理機制
**預期結果:**
- 顯示適當的錯誤訊息或離線頁面
- 不會出現無意義的技術錯誤訊息
- 提供重試或返回選項
#### 4.2 瀏覽器相容性測試
**步驟:**
1. 在不同瀏覽器（Chrome、Firefox、Safari、Edge）中開啟 https://playwright.dev/
2. 驗證頁面顯示一致性
3. 測試 'Get started' 按鈕功能
4. 檢查跨瀏覽器的導航行為
**預期結果:**
- 所有主流瀏覽器中頁面顯示正常
- 'Get started' 功能在所有瀏覽器中正常運作
- 頁面標題在所有瀏覽器中正確顯示
- 無瀏覽器特定的佈局問題
### 5. 可及性（Accessibility）測試
#### 5.1 鍵盤導航測試
**步驟:**
1. 導航到 https://playwright.dev/
2. 使用 Tab 鍵瀏覽頁面元素
3. 確認 'Get started' 按鈕可通過鍵盤聚焦
4. 使用 Enter 鍵啟動 'Get started' 功能
**預期結果:**
- 所有互動元素可通過鍵盤存取
- Tab 順序邏輯且直觀
- 聚焦指示器清晰可見
- 鍵盤啟動功能與滑鼠點擊效果一致
#### 5.2 螢幕閱讀器相容性測試
**步驟:**
1. 導航到 https://playwright.dev/
2. 檢查頁面標題的語義標記
3. 驗證 'Get started' 按鈕的替代文字
4. 測試主要內容的可讀性
**預期結果:**
- 頁面具有適當的語義 HTML 結構
- 'Get started' 按鈕有清晰的標籤或替代文字
- 主要標題使用正確的標題標籤（h1, h2 等）
- 重要內容對螢幕閱讀器可存取
## 測試執行注意事項
### 環境設定
- 確保測試環境具備穩定的網路連線
- 使用最新版本的測試瀏覽器
- 清除瀏覽器快取以確保測試準確性
### 測試前提條件
- 所有測試假設從全新/清空狀態開始
- 無需登入或特殊權限
- 假設目標網站正常運行
### 成功標準
- 頁面標題驗證：100% 通過
- 導航功能測試：100% 通過
- 效能測試：載入時間 < 3 秒
- 相容性測試：在主流瀏覽器中 95% 功能正常
- 可及性測試：符合 WCAG 2.1 AA 基本要求
### 失敗條件
- 頁面無法載入或顯示錯誤
- 'Get started' 按鈕無法點擊或跳轉失敗
- 跳轉後的頁面不是預期的安裝頁面
- 載入時間超過 5 秒
- 主要功能在任何主流瀏覽器中完全無法使用
## 結語
本測試計畫涵蓋了 Playwright 官網首頁的核心功能驗證，包括標題檢查、主要導航功能和頁面跳轉驗證。測試設計確保網站的基本功能運作正常，並提供良好的用戶體驗。所有測試場景都是獨立的，可以按任何順序執行，適合自動化測試框架實施。
// spec: specs/playwright-website-test/test-plan.md
// seed: seed.spec.ts
import { test, expect } from '@playwright/test';
test.describe('導航功能測試', () => {
test("'Get started' 按鈕功能驗證", async ({ page }) => {
// 1. 導航到 https://playwright.dev/
await page.goto('https://playwright.dev/');
// 2. 等待頁面完全載入 - 使用可靠的元素等待而不是 waitForLoadState
await expect(page.locator('h1')).toBeVisible();
// 3. 尋找並識別 'Get started' 按鈕或連結
const getStartedButton = page.locator('text="Get started"').first();
// 預期結果驗證: 'Get started' 按鈕/連結在首頁中可見且可點擊
await expect(getStartedButton).toBeVisible();
await expect(getStartedButton).toBeEnabled();
// 4. 點擊 'Get started' 按鈕
await getStartedButton.click();
// 5. 等待新頁面載入 - 使用 URL 變化和頁面內容來驗證導航成功
// 預期結果驗證:
// - 點擊後成功跳轉到新頁面
// - 新頁面 URL 指向安裝或設定相關頁面
await expect(page).toHaveURL(/docs\/intro/);
// - 頁面跳轉無錯誤或載入問題
await expect(page.locator('h1')).toBeVisible();
});
test('跳轉至 Installation 頁面驗證', async ({ page }) => {
// 1. 從首頁點擊 'Get started' 按鈕（延續 2.1 場景）
await page.goto('https://playwright.dev/');
await expect(page.locator('h1')).toBeVisible();
const getStartedButton = page.locator('text="Get started"').first();
await expect(getStartedButton).toBeVisible();
await getStartedButton.click();
// 2. 驗證目標頁面 URL
// 預期結果: URL 變更為安裝/入門相關路徑
await expect(page).toHaveURL(/docs\/intro/);
// 3. 檢查頁面內容是否為安裝指南
// 預期結果: 頁面包含 Playwright 安裝說明
const installationContent = page.locator('text="Installation"');
await expect(installationContent).toBeVisible();
// 4. 驗證頁面標題是否包含 "Installation" 或相關關鍵字
// 預期結果: 頁面標題反映安裝或入門內容
await expect(page).toHaveTitle(/installation/i);
// 額外驗證: 確認頁面包含具體的安裝指令
const npmInstallCommand = page.locator('text="npm init playwright"');
await expect(npmInstallCommand).toBeVisible();
// 預期結果: 頁面載入速度在合理範圍內（< 3秒）
// 這由 Playwright 的預設 timeout 機制保證，無需額外驗證
});
});
npx playwright test tests/navigation-functionality.spec.ts -g "Get started"
// 3. 尋找並識別 'Get started' 按鈕或連結
const getStartedButton = page.locator('text="Get started11"').first();
執行 tests/navigation-functionality.spec.ts 檔案中的 'Get started' 測試案例，如果失敗，請自動修復 Selector。
今天，我們掌握了 Playwright Agents 的三位一體心法。我們學會了如何讓 Playwright Agents 的三個元件 planner、generator。它將我們從繁瑣的程式碼編寫與維護工作中解放出來。這就像學會了最上乘內功的基本吐納之法。我們已經能將「意念」轉化為「氣」，並讓「氣」在體內自我療癒。不過，根據我的經驗有時候 AI 會一直嘗試修復，但是方向不一定會正確，這時候就需要適度人為介入。
iThome鐵人賽
看影片追技術